<div
  class="modal fade modal-{{$ctrl.message.class}}"
  id="modal-content-filter"
  tabindex="-1"
  role="dialog"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <h6 class="modal-header">Search links</h6>
      <div class="modal-body row">
        <div class="col">
          <div class="mb-5" ng-if="$ctrl.data.items.length>0">
            <ul class="p-0 m-0">
              <li
                ng-repeat="nav in $ctrl.data.items"
                class="container border-left-0 border-right-0 py-1 rounded-0"
                ng-class="{'selected': selected === nav.isActive}"
                style="list-style: none"
                ng-click="$ctrl.select(nav)"
              >
                <div class="row border-bottom">
                  <!-- <div class="drag-header" style="cursor:grab; width: 15px;">
                                                    <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small>
                                                </div> -->
                  <div class="col-10">
                    <div class="form-check form-switch">
                      <input
                        type="checkbox"
                        id="content_{{$index}}"
                        class="form-check-input"
                        ng-model="nav.isActive"
                      />
                      <label
                        class="custom-control-label"
                        for="content__{{$index}}"
                        >{{nav.title}}</label
                      >
                    </div>
                  </div>
                  <div class="col-2 text-end">
                    <a
                      class="text-primary btn btn-sm"
                      ng-click="$ctrl.edit(nav)"
                      ><i class="fa fa-pen"></i
                    ></a>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <paging
            class="small"
            page="$ctrl.data.page"
            page-size="$ctrl.data.pageSize"
            total="$ctrl.data.totalItems"
            ul-class="pagination justify-content-end m-0"
            a-class="page-link"
            paging-action="$ctrl.loadData(page-1)"
            scroll-top="true"
          >
          </paging>
        </div>

        <div class="col-3">
          <filter-list
            request="$ctrl.request"
            callback="$ctrl.loadData(pageIndex)"
          ></filter-list>
          <select
            class="form-select mt-3"
            ng-model="$ctrl.type"
            ng-change="$ctrl.loadData(0)"
          >
            <option
              ng-repeat="item in $ctrl.types track by $index"
              value="{{item}}"
            >
              {{item}}
            </option>
          </select>
        </div>
      </div>
      <!-- TODO: Hoang to chec submit function not working-->
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-sm btn-primary px-3"
          data-bs-dismiss="modal"
          ng-click="$ctrl.closeDialog()"
        >
          Select and Close
        </button>
      </div>
    </div>
  </div>
</div>
